<template>
  <div class="container">
    <div class="box-title">
      <img :src="obj.img" title="icon" />
      <div class="text">
        {{ obj.title }}
      </div>
    </div>
    <div class="box-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "boxTitle",
  props: {
    obj: {
      type: Object,
      default: () => {
        return {
          title: "eee",
          img: require("@/assets/myself_img/icon_hammer.png"),
        };
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100% !important;
  width: 100% !important;
  padding-top: 10px !important;
  .box-title {
    height: 41px;
    line-height: 41px;
    img,
    .text {
      display: inline-block;
      vertical-align: middle;
    }
    img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
    .text {
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #393b3c;
    }
  }
  .box-content {
    height: calc(100% - 51px);
    box-sizing: border-box;
    overflow: hide;
    border: 1px solid rgba(145, 178, 204, 0.32);
  }
}
</style>
